<!--
 * @Author: [you name]
 * @Date: 2021-09-17 09:16:36
 * @LastEditors: [you name]
 * @LastEditTime: 2021-09-22 19:01:11
 * @Description: 
-->
<template>
  <div class="header">
    <!-- 头部顶部 -->
    <div class="header_top">
      <div class="wrapper">
        <!-- 左侧 -->
        <div class="left">欢迎进入网站</div>
        <!-- 右侧 -->
        <div class="right">门户网页</div>
      </div>
    </div>
    <!--头部 底部 -->
    <div class="header_bottom">
      <div class="wrapper">
        <div class="logo" @click="toHome">
          <img src="../../../public/logo.png" alt="" />
        </div>
        <!-- 菜单栏 -->
        <ul class="menu">
          <!-- @click="toList(c) --跳转到列表页 -->
          <li @click="toList(c)" v-for="c in categories" :key="c.id">
            {{c.name}}
          </li>    
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from "../../utils/request";
export default {
  data(){
    return{
      categories:[]
    }
  },
  methods:{
    // 请求栏目数据
    getCategoriesData(){
      get('/index/category/findAll').then(res =>{
        // console.log(res.data);
        this.categories = res.data
      })
    },
    // 跳转到列表页
    toList(category){
      // 路由跳转
      this.$router.push({
        // 要跳转的路径
        path:'list',
        // 要传递的参数
        query:category
      })
    },
    // 返回首页
    toHome(){
      this.$router.push('/')
    }

  },
  created(){
    this.getCategoriesData()
  }
};
</script>

<style lang="scss" scoped>
// 头部样式
.header {
  // 头部顶部样式
  .header_top {
    background-color: #018b39;
    color: aliceblue;
    font-size: 18px;
    // wrapper容器
    .wrapper {
      // 左侧样式
      .left {
        float: left;
      }
      // 右侧样式
      .right {
        float: right;
      }
    }
    // wrapper清除浮动
    .wrapper::after {
      display: block;
      content: "";
      clear: both;
    }
  }

  // 头部顶部样式
  .header_bottom {
    .wrapper {
      display: flex;
      .logo {
        cursor: pointer;
        flex: 1;
        img {
          width: 200px;
        }
      }
      .menu {
        flex: 2;
        li {
          float: right;
          padding: 0 0.5em;
          list-style: none;
          line-height: 60px;
          font-size: 16px;
          // 鼠标进入时得样式
          cursor: pointer;
        }
      }
    }
  }
}
</style>